<template>
  <view v-if="isVisible">
    <view class="assistant-button">
      <text class="assistant-text" @tap="clickReport">测算报告</text>
      <view class="mini-close-button" @tap="isVisible = false">
        <u-icon name="close" color="#FFF" size="12"></u-icon>
      </view>
    </view>
    <u-popup :show="showUserSelectDialog" mode="center">
      <view class="user-select-dialog">
        <view class="user-title">请选择要查看的用户</view>
        <view
          class="user-card"
          v-for="(user, idx) in userList"
          :key="user.userInfo.basicInfo.userId"
        >
          <view class="user-info">
            <text class="user-name">{{
              user.userInfo.basicInfo.userName || "用户" + (idx + 1)
            }}</text>
          </view>
          <button class="select-btn" @tap="handleUserSelect(user)">选择</button>
        </view>
      </view>
    </u-popup>
    <phone-input-dialog
      :visible="showPhoneDialog"
      @close="closePhoneDialog"
      @success="handlePhoneSuccess"
    />
  </view>
</template>

<script>
import PhoneInputDialog from "@/components/dialog/PhoneInputDialog.vue";
import { findResultByUserPhone } from "@/api/fortune";
import { mapActions, mapGetters } from "vuex";
export default {
  name: "FloatingImage",
  components: {
    PhoneInputDialog,
  },
  data() {
    return {
      isVisible: true,
      showPhoneDialog: false, // 手机号输入弹窗
      userList: [],
      showUserSelectDialog: false,
      selectedUser: null,
    };
  },
  methods: {
    ...mapActions("system", ["setUserId", "setUserCount", "setUserPhone"]),
    ...mapActions("fortune", [
      "setUserInfo",
      "setMarriageInfo",
      "setOtherUserInfo",
      "setOtherResultInfo",
    ]),
    ...mapActions("hehun", ["setHehunUserId", "setHehunUserInfo"]),
    clickReport() {
      this.showPhoneDialog = true;
    },

    closePhoneDialog() {
      this.showPhoneDialog = false;
    },
    async handlePhoneSuccess(phoneNumber) {
      this.showPhoneDialog = false;
      try {
        uni.showLoading({ title: "加载中", mask: true });
        const res = await findResultByUserPhone(phoneNumber);
        if (res.code === 0 && Array.isArray(res.data) && res.data.length > 0) {
          if (res.data.length === 1) {
            this.handleUserSelect(res.data[0]);
          } else {
            this.userList = res.data;
            this.showUserSelectDialog = true;
          }
        } else {
          this.$show.showToast(res.message || "获取数据失败");
        }
      } catch (e) {
        this.$show.showToast("获取数据失败");
      } finally {
        uni.hideLoading();
      }
    },
    handleUserSelect(userData) {
      // 基础信息
      this.setUserId(userData.userInfo?.basicInfo?.userId || "");
      this.setUserInfo(userData.userInfo.basicInfo || {});
      this.setOtherUserInfo(userData.userInfo || {});

      userData.userPayInfo.forEach((item) => {
        // 姻缘测算
        if (item.goodsId == "20250618001") {
          if (item.payState == "1") {
            this.$store.dispatch("payment/setPayStatus", {
              type: "marriage",
              status: true,
            });
            this.setMarriageInfo(item.result);
          } else {
            this.$store.dispatch("payment/setPayStatus", {
              type: "marriage",
              status: false,
            });
          }
        }
        // 合婚测算
        else if (item.goodsId == "20250618002") {
          if (item.payState == "1") {
            this.$store.dispatch("payment/setPayStatus", {
              type: "hehun",
              status: true,
            });
            this.setHehunUserId(userData.userInfo?.heHunInfo?.heHunId || "");
          } else {
            this.$store.dispatch("payment/setPayStatus", {
              type: "hehun",
              status: false,
            });
          }
        } else if (item.goodsId == "20250618007") {
          this.setOtherResultInfo(item.result);
          if (item.payState == "1") {
            this.$store.dispatch("payment/setPayStatus", {
              type: "other",
              status: true,
              index: 4,
            });
          } else
            item.result.forEach((i, index) => {
              this.$store.dispatch("payment/setPayStatus", {
                type: "other",
                status: i.payState == 1,
                index: index,
              });
            });
        }
      });
      this.showUserSelectDialog = false;

      uni.navigateTo({
        url: "/pages/payResult/report",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.assistant-button {
  position: fixed;
  width: 45px;
  right: 5px;
  bottom: 19%;
  z-index: 999;
  background: #ec6953;
  padding: 4px 6px;
  border-radius: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;

  &:active {
    opacity: 0.9;
  }
}

.assistant-text {
  color: #fff;
  font-size: 28rpx;
  font-weight: 500;
}

.mini-close-button {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &:active {
    opacity: 0.8;
  }
}

.full-image-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  position: relative;
  width: 80%;
  max-width: 600rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
}

.full-image {
  width: 100%;
  border-radius: 8rpx;
}

.modal-close-button {
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  width: 40rpx;
  height: 40rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &:active {
    opacity: 0.8;
  }
}

.user-select-dialog {
  padding: 32rpx 24rpx;
  min-width: 600rpx;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
  color: #333;
}

.user-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f8f8;
  border-radius: 12rpx;
  padding: 20rpx 16rpx;
  margin-bottom: 18rpx;
  box-shadow: 0 2px 8px rgba(236, 105, 83, 0.06);
}

.user-info {
  display: flex;
  align-items: center;
}

.user-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #222;
}

.select-btn {
  margin: 0;
  background: #ec6953;
  color: #fff;
  border: none;
  border-radius: 24rpx;
  padding: 8rpx 32rpx;
  font-size: 26rpx;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(236, 105, 83, 0.12);
  transition: background 0.2s;
}
.select-btn:active {
  background: #d85a45;
}
</style>
